<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Venturi Youtube</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="ui/iui-logo-touch-icon.png" />
<meta name="apple-touch-fullscreen" content="YES" />

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css" media="screen">@import "iui/iui.css";</style>
    <script type="application/x-javascript" src="iui/iui.js"></script>

  
  <script type="text/javascript">
    var idList = [];
    var imgList = [];
    var titleList = [];
    var descList = [];
    var durList = [];
    var authorList = [];
    var viewsList = [];
    var rateList = [];
    var htmldata = "";
    $(document).ready(function(){
        htmldata = htmldata + "<ul id='home' title='Videos' selected='true'>";
        for(var i=0; i < idList.length; i++) {
            htmldata = htmldata + "<li>" + 
            "<a href='" + idList[i] + "'><img src='" + imgList[i] + "' style='position: float; height: 60px;'></a>" +
            "<div style='position: absolute; top: 2%; left: 30%; height: 0%; width: 60%;'>" + 
            "<a href='" + idList[i] + "' style='display: block; text-decoration: none; font-size: 10px;'>" + titleList[i] + "</a>" +
            "<span style='font-size: 8px;'>" + rateList[i] + "</span>&nbsp;&nbsp;" +
            "<span style='font-size: 8px; color: #d3d3d3;'>" + viewsList[i] + "&nbsp;views</span><br>" +
            "<span style='font-size: 8px;'>" + durList[i] + "&nbsp;secs&nbsp;&nbsp;" + "</span>" +
            "<span style='font-size: 8px; color: #d3d3d3;'>" + authorList[i] + "</span></div></li>";
        }
        htmldata = htmldata + "</ul>";
        $('body').append(htmldata);
    });
  </script>
</head>

<body>
    <div id="topheader" class="toolbar">
        <h1 id="pageTitle"></h1>
    </div>
<!--
    <div id="data" style="position: fixed; top: 200px; width: 200px; height: 100px; background: green;">
    PD
    </div>
-->
</body>

<script type="text/javascript">
    function listEvents(root) {
        var feed = root.feed;
        var entries = feed.entry || [];

        for (var i = 0; i < entries.length; ++i) {
            var entry = entries[i];
            var title = entry.title.$t;
            var link = entry.media$group.media$player[0].url;
            var img = entry.media$group.media$thumbnail[0].url;
            var dur = entry.media$group.yt$duration.seconds;
            var author = entry.author[0].name.$t;
            var views = entry.yt$statistics.viewCount;
            var rate = entry.gd$rating.average;
            var desc = entry.content.$t;

            desc = desc.substr(0, 200) + " ...";
            title = title.substr(0, 50) + " ...";
            link = link.replace(/www.youtube.com/i, "67.91.202.221:8080");

            descList.push(desc);
            titleList.push(title);
            idList.push(link);
            imgList.push(img);
            durList.push(dur);
            authorList.push(author);
            viewsList.push(views);
            rateList.push(rate);
        }
    }
</script>

<script src="http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?time=this_week&alt=json-in-script&callback=listEvents&max-results=25&format=5"></script>
</html>
